<template>
    <div class="w-e-menu tl-rich-text-menu">
        <tl-search-select ref="PersonSearchSelect"
                          tag="input"
                          placement="bottom"
                          :autoClearable="false"
                          :hideDefaultSelect="true"
                          :show-title="false"
                          :multiple="true"
                          subtitle="请选择成员"
                          searchPlaceholder="搜索项目成员姓名"
                          emptyText="该成员不在已有项目成员中，邀请Ta加入。"
                          :querySearchAsync="handleQuerySearchAsync"
                          @submit="handleFormChange">
            <span>@</span>
        </tl-search-select>
    </div>
</template>

<script>
    import {SearchSelect} from "@bixiao/ui";
    import {cloneDeep} from 'lodash'

    export default {
        components: {
            [SearchSelect.name]: SearchSelect
        },
        props: {
            editor: {
                type: Object,
                required: true,
            }
        },
        data: function () {
            return {
                projectMemberList: [],
                participants: []
            }
        },
        methods: {
            // 异步搜索全部项目成员
            async handleQuerySearchAsync(keywords, next, instance, type) {
                const {project_id} = this.editor.config.libraryApiQuery || {};
                if (!project_id) {
                    next([]);
                    return this.handleError();
                }
                instance.loading = true;
                const result = await this.$ajax_pm.Member.memberQuery({
                    project_id,
                    keywords,
                    page: 1,
                    page_size: 100
                })
                instance.loading = false;
                if (result.code === 0) {
                    const list = result.data && Array.isArray(result.data.list) ? result.data.list : [];
                    let users = [{
                        user_id: '0',
                        avatar: require('./avatar.png'),
                        nickname: `全部项目成员 · ${result.data.total}`
                    }].concat(list);
                    next(users);
                } else {
                    this.$ele.$message.error(result.message)
                }
            },
            // 保存请求的项目成员数据
            handleSavaProjectMember(list) {
                const {project_id} = this.editor.config.libraryApiQuery || {};
                if (!project_id) return;
                const projectMemberList = this.projectMemberList.filter(value => {
                    return value.project_id === project_id && !list.some(val => val.user_id === value.user_id)
                });
                this.projectMemberList = projectMemberList.concat(list.map(value => {
                    value.project_id = project_id;
                    return value
                }))
            },
            handleFormChange(participants) {
                this.participants = participants.map(value => value.user_id > -1);
                // const list = this.projectMemberList.filter(value => this.participants.includes(value.user_id))
                this.$emit('change', cloneDeep(participants));
            }
        }
    }
</script>

<style scoped>

</style>
